<template>
	<view class="box">
		<!-- 右上角关闭遮罩层 -->
		<view>
			<u-navbar title="快车接单中心" :autoBack="true" placeholder>
			</u-navbar>
		</view>
		<view v-for="(i,index) in OrderArr" :key="index">
			<!-- 遮罩层 -->
			<u-overlay :show="show" :opacity="0.7" v-for="g in Real_timeOrder" :key="g.id">
				<view class="Close">
					<u-icon name="close" color="white" size="28" @click="shows"></u-icon>
				</view>

				<view class="Real_time">
					<h3>订单详细</h3>
					<h2><span>{{g.nowTime | dateFormat}}</span></h2>
				</view>
				<view class="destination" style="margin-top: 5%;">
					<view class="round2">
						<u-badge :isDot="true" type="success" bgColor="green"></u-badge>
					</view>
					<p>{{g.departure}}</p>
				</view>
				<view class="destination" style="margin-top: 5%;">
					<view class="round2">
						<u-badge :isDot="true" type="success" bgColor="orange"></u-badge>
					</view>
					<p>{{g.destination}}</p>
				</view>
				<!-- 接单按钮 -->
				<view class="but">
					<button @click="DetOrder">接单</button>
				</view>
			</u-overlay>
			<view class="contentbox" @click="showOrder(i)">
				<!-- 创建时间 -->
				<p>{{i.nowTime | dateFormat}}</p>
				<view class="orderState">
					<text>{{i.state===0 ? '未接单':'已接单'}}</text>
					<text v-if="i.urgentState" style="color: red;">急单</text>
				</view>
				<view class="begin">
					<view class="round">
						<u-badge :isDot="true" type="success" bgColor="orange"></u-badge>
					</view>
					<!-- 出发地详细地 -->
					<span>{{i.departure}}</span>
				</view>
				<view class="begin">
					<view class="round">
						<u-badge :isDot="true" type="success" bgColor="black"></u-badge>
					</view>
					<!-- 目的地 -->
					<span>{{i.destination}}</span>
				</view>
				<!-- 目的地 -->
				<view class='destination_span'>
					<h2>￥{{i.price}}</h2>
				</view>
			</view>
		</view>
		<!-- 提示订单的 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import amap from "../../common/amap-wx.130.js"
	import {
		getDataObj
	} from '@/common/utils.js'
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				amapPlugin: null, // 插件效果
				gaodeKey: "4412f1a1546136b8476c2c1011cbbad9", //  高德地图申请的key
				show: false, //遮罩层
				OrderArr: [], //订单列表
				Real_timeOrder: [], //接单列表
				points: {}, //司机定位信息
				driverInfo: {},
				distance: '', //司机距离乘客的距离
				addressPath: [], //路线规划
				city: '', //司机城市
				province: '', //省份
			}
		},
		computed: {
			...mapState('driverInfo', ['driverSocketID'])
		},
		onLoad() {
			this.amapPlugin = new amap.AMapWX({
				key: this.gaodeKey
			})

			// 司机信息
			this.driverInfo = uni.getStorageSync('DriveruserTable')


			// 获取当前位置
			this.getCurrAddress()


			// 拿到司机的socket的身份牌---后期可以用 司机登录替换
			this.socket.emit('login', this.driverInfo.userId)
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			...mapMutations('driverInfo', ['setdriverSocketID', 'setOrderInfo']),
			// 接收信息
			getInfo() {
				// 连接socket---登记身份
				this.socket.on('relogin', message => {
					// 收到服务器消息
					console.log('收到服务器消息：', message)
					// 司机身份
					let name = message.name
					this.setdriverSocketID(name)
				})
				// 接收用户订单     司机广播订单
				this.socket.on('usercallCar', (callInfo) => {
					// console.log(callInfo, '订单信息')

					// 做区域的订单--判断
					console.log(callInfo.city, this.city, '=========')
					console.log(callInfo.province !== this.province, '=========')

					if (callInfo.city !== this.city || callInfo.province !== this.province) return console.log(
						'不属于同一个城市，不接受订单')

					// 用户取消订单
					if (callInfo.cancelOrder) {
						const index = this.OrderArr.findIndex(item => item.socketID == callInfo.socketID)
						this.OrderArr.splice(index, 1)
					} else {
						if (this.OrderArr.length >= 1) {
							// 找出已被司机接单的信息
							const index = this.OrderArr.findIndex(item => item.socketID == callInfo.socketID &&
								item.state == 1)
							if (index >= 0) {
								this.OrderArr.splice(index, 1)
							} else {
								// 添加 快车订单信息
								if (callInfo.carType == 27) {
									if (JSON.stringify(this.OrderArr).includes(JSON.stringify(callInfo)) ==
										false) {
										console.log('订单不存在')
										if (callInfo.urgentState) { //判断是否属于 加急订单
											const index = this.OrderArr.findIndex(item => item.socketID == callInfo
												.socketID)
											this.OrderArr.splice(index, 1, callInfo)
										} else {
											this.OrderArr.push(callInfo)
										}
									} else {
										console.log('订单已存在')
									}
								} else {
									console.log('不属于快车订单')
								}
							}
						} else {
							// 首次---添加--快车订单信息
							if (callInfo.carType == 27) {
								this.OrderArr.push(callInfo)
							} else {
								console.log('不属于快车订单')
							}
						}
					}
				})
			},
			//显示遮罩层
			showOrder(i) {
				this.show = !this.show
				this.Real_timeOrder = []
				console.log(i, '点击的订单信息')
				this.addressPath[0] = {
					longitude: 118.177301,
					latitude: 24.504658
				}
				// 用户的定位
				this.addressPath[1] = {
					longitude: JSON.parse(i.originLatLong).longitude,
					latitude: JSON.parse(i.originLatLong).latitude
				}
				// 路线规划
				this.amapPlugin.getDrivingRoute(getDataObj(this.addressPath, this))

				this.Real_timeOrder.push(i)
			},
			//司机---点击接单
			async DetOrder() {
				// 判断---距离太远不接单
				if (Number(this.distance) > 5) {
					this.$refs.uToast.show({
						type: 'default',
						message: "距离太远了",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
					})
					this.show = !this.show
					return
				}
				// 发送socket---通知用户
				let orderInfo = this.Real_timeOrder[0] //点击点单详细

				orderInfo.name = this.driverSocketID // 订单添加---接单司机id
				orderInfo.points = this.points // 订单添加---司机出发地经纬度
				orderInfo.state = 1 //改变订单状态  1----接单, 0---未接单

				orderInfo.userTel = this.driverInfo.userTel // 司机的手机
				orderInfo.driverPhoto = this.driverInfo.driverPhoto //司机头像
				orderInfo.CarNum = this.driverInfo.CarNum //司机的车牌号
				orderInfo.driverName = this.driverInfo.driverName //司机姓名

				// 改变订单，数据库添加----接单时间,
				const result = await this.$http('/driverOrder', orderInfo, 'POST')
				if (result.code !== 200) {
					uni.$showMsg('接单失败', 'error')
					return
				}

				this.setOrderInfo(orderInfo) // 存储订单信息---vuex

				// 发送订单信息-->用户
				this.socket.emit('send_msg', orderInfo)

				// 告知其他司机，次订单已经接收
				this.socket.emit('callCar', orderInfo)

				// 提示司机
				uni.showToast({
					title: '接单成功',
					duration: 2000,
				})
				// 同步提示跳转
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/placeofArrival/placeofArrival'
					})
				}, 2000)
			},
			// 关闭订单详细遮罩层
			shows() {
				this.show = !this.show
			},
			// 获取司机的地区
			getCurrAddress() {
				this.amapPlugin.getRegeo({
					success: data => {
						console.log('469', data, '获取当前位置')
						this.points = {
							// longitude: res.longitude,
							// latitude: res.latitude
							longitude: 118.177301,
							latitude: 24.504658
						}
						this.city = data[0].name.split('市')[0] + '市'
						this.province = data[0].regeocodeData.formatted_address.split('省')[0] + '省'
					},
					fail: (err) => {
						console.log(err, '报错了')
					}
				})

			}
		},
	}
</script>

<style lang="scss" scoped>
	.box {
		background-color: #F0F2F5;
		width: 100%;
		position: relative;
	}

	.contentbox {
		width: 90%;
		background-color: white;
		border-radius: 20px;
		margin: 0 auto;
		margin-top: 5%;
		padding-left: 20px;

	}

	.contentbox>p>span {
		height: 10px;
		width: 20px;
		background-color: #5E6976;
		color: white;
		font-weight: 700;
		border-radius: 5px;
		font-size: 12px;
		padding: 2px;
		margin-left: 5px;
	}

	.contentbox>p {
		font-weight: 700;
		padding-top: 5%;
		font-size: 20px;
		margin-bottom: 5px;
	}

	.begin {
		display: flex;
		margin-bottom: 5px;
	}

	.begin span {
		font-size: 14px;
		color: #959EA9;
	}

	.destination {
		display: flex;
	}

	.destination_span span {
		font-size: 14px;
		color: #959EA9;
		margin-left: 5%;
	}

	.destination_span h2 {
		width: 96%;
		border-radius: 24%;
		display: flex;
		justify-content: flex-end;
		padding-right: 21px;
		box-sizing: border-box;
		padding-bottom: 5px;
	}

	.Close {
		position: absolute;
		right: 5%;
		top: 10%;
	}

	.Real_time {
		width: 60%;
		margin: 0 auto;
		margin-top: 40%;
	}

	.Real_time h3 {
		color: white;
		text-align: center;
		margin-bottom: 5px;
	}

	.Real_time h2 {
		color: white;
		text-align: center;
		font-size: 18px;
	}

	.Real_time span {
		color: white;
		text-align: center;
		font-size: 26px;
		font-weight: 900;
	}

	.Real_time p {
		color: #90909A;
		text-align: center;
	}

	.destination p {
		color: #DADCE8;
		font-size: 20px;
		margin-left: 10px;
	}

	.but {
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	.but>button {
		background-color: orange;
		color: white;
		height: 60px;
		line-height: 60px;
		font-size: 20px;
	}

	.round {
		margin-top: 5px;
		margin-left: 2%;
		margin-right: 5px
	}

	.round2 {
		margin-top: 12px;
		margin-left: 10%;
	}

	.orderState {
		display: flex;
		align-items: center;
		margin-bottom: 5px;

		text {
			margin-right: 15px;
			font-size: 20px;
		}
	}
</style>
